define([
    'jquery',
    'underscore',
    'backbone',
    'text!templates/business/service-details.html',
    'iscroll'
], function ($, _, Backbone,template) {
     var ServiceDetailView = Backbone.View.extend({

         tagName:"div", // Not required since 'div' is the default if no el or tagName specified
         template : _.template(template),
         initialize:function () {

             /*this.template = _.template(tpl.get('business/business-details'));*/
             this.model.bind("change", this.render, this);
         },

         render:function (eventName) {
             $(this.el).html(this.template(this.model.toJSON()));
             return this;
         },

         events:{
             /*"change input":"change",
              "click .save":"saveBusiness",
              "click .delete":"deleteBusiness"*/
         },

         change:function (event) {
             var target = event.target;
             console.log('changing ' + target.id + ' from: ' + target.defaultValue + ' to: ' + target.value);
             // You could change your model on the spot, like this:
             // var change = {};
             // change[target.name] = target.value;
             // this.model.set(change);
         },

         /*saveBusiness:function () {
          this.model.set({
          name:$('#name').val(),
          grapes:$('#grapes').val(),
          country:$('#country').val(),
          region:$('#region').val(),
          year:$('#year').val(),
          description:$('#description').val()
          });
          if (this.model.isNew()) {
          var self = this;
          app.businessList.create(this.model, {
          success:function () {
          app.navigate('api/business/' + self.model.id, false);
          }
          });
          } else {
          this.model.save();
          }

          return false;
          },*/

         scrollRender:function(){
             this.scrollNav = new iScroll('navWrapper');
             this.scrollContent = new iScroll('contentWrapper');
         },

         deleteService:function () {
             this.model.destroy({
                 success:function () {
                     alert('Service deleted successfully');
                     window.history.back();
                 }
             });
             return false;
         }

     });
    return ServiceDetailView
});

